<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <a href="addUser.html">新增用户</a>
    <table border="1" style="width: 1000px;margin: 0 auto;">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>

        <tr v-for="user in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td>
                <button type="button" @click="deleteById(user.id)">删除</button>&nbsp; &nbsp;
                <button type="button" @click="updateById(user.id)">修改</button>&nbsp; &nbsp;
            </td>
        </tr>
    </table>
</div>

<script>
    /*创建vue对象*/
    var vue = new Vue({
        el:"#app",
        //vue存放模型数据
        data:{
            users:[]
        },
        //在页面加载完毕以后执行程序
        mounted(){
            //发送网络请求获取用户列表信息
            axios.get("/user/list").then(function (response) {
                console.log(response);
                if (response.data.code===200){
                    //获取数据
                    var users =  response.data.data;
                    //将获取的网络数据设置给vue的users
                    vue.users = users;
                }

            })

        },
        //vue编写自定义函数（方法）的位置
        methods:{
            //删除方法
            deleteById:function (id){
                if(confirm("温馨提示：删除数据不可恢复，确定要删除吗？")){
                    axios.get("/user/delete?id="+id).then(function (response){
                        if(response.data.code===200){
                            alert("删除成功")
                            //重新加载一下页面
                            location.reload();

                        }else{
                            alert(response.data.message);
                        }

                    })
                }
            },
            updateById:function (id){
                //跳转到修改页面
                window.location.href="updateUser.html?id="+id;
            }
        }
    })

</script>
</body>
</html>
